<template>
  <div class="app-container">
    <el-card class="box-card">
<!--      form -----content-->
      <div>
        <div class="form-content">
          <el-form :inline="true" :model="form" class="demo-form-inline" label-suffix=":">
            <el-form-item label="变配电站名称：">
              <el-input v-model="form.name" placeholder="请输入变配电站名称：" />
            </el-form-item>
            <el-form-item class="marginLeft">
              <el-button type="primary" icon="el-icon-search" class="button" @click="handelSearch"></el-button>
            </el-form-item>
            <el-form-item label="排序字段：" class="marginLeft" style="margin-left: 20px">
              <el-input v-model="form.typeOfWork" placeholder="请输入排序字段" />
            </el-form-item>
            <el-form-item label="排序方式：" class="marginLeft">
              <el-input v-model="form.typeOfWork" placeholder="请输入排序方式" />
            </el-form-item>
            <el-form-item class="marginLeft">
              <el-button type="primary" class="button" icon="el-icon-search" @click="handelSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
<!--      end --- form-->
      <el-divider />
<!--      table-content-->
      <div class="table-content">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          :span-method="objectSpanMethod"
          tooltip-effect="dark"
          fixed
          border
          style="width: 100%"
        >
          <el-table-column
            label="回路名称"
            align="center"
            width="120"
            prop="r_name"
          >
          </el-table-column>

          <el-table-column
            label="变配电站名称"
            align="center"
            prop="name"
            width="120"
          >
          </el-table-column>
          <el-table-column
            label="00时"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="age"
            label="01时"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="bloodType"
            label="04-03"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            show-overflow-tooltip
            prop="dateOfBirth"
            align="center"
            format="yyyy-MM-dd"
            label="02时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="workingYears"
            align="center"
            label="03时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="education"
            align="center"
            label="04时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="identityCard"
            align="center"
            label="05时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="homeAddress"
            align="center"
            label="06时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="telephone"
            align="center"
            label="07时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="laborServiceCompanyList.corporateName"
            width="120"
            align="center"
            label="08时"
          />
          <el-table-column
            show-overflow-tooltip
            prop="typeOfWork"
            align="center"
            label="09时"
          />
        </el-table>
      </div>

<!--      add/edit--content-->
      <el-dialog
        :visible.sync="visible"
        fullscreen
        @close="handleClose"
      >
        <add-edit-alert :alertType="alertType" :rowData="rowData" :key="Math.random()" @submit="handleSubmit"></add-edit-alert>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import AddEditAlert from './components/AddEditAlert'
export default {
  name: 'Index',
  components: { AddEditAlert },
  data() {
    return {
      alertType: '',
      loading: false,
      visible: false,
      form: {
        name: '',
        typeOfWork: ''
      },
      tableData: [{
        r_name: 'xx',
        name: 'jingo'
      }, {
        r_name: 'xx',
        name: 'test2'
      }, {
        r_name: 'xx',
        name: 'test3'
      }, {
        r_name: 'xx',
        name: 'test4'
      }], // table数据
      rowData: {},
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 100
      }
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      const length = this.tableData.length
      if (columnIndex === 0) {
        if (rowIndex % length === 0) {
          return {
            rowspan: length,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card{
    padding: 20px;
    .table-content{
      &::v-deep th{
        background-color: #01ADA8FF !important;
        color: #fff;
      }
      .pagination-container{
        width: 100%;
        text-align: right;
      }
    }
  }
</style>
